<template>
	<view class="index-page">
		<view class="top">
			<u-navbar :background="background" :border-bottom="false" class="top-navbar" :is-back="false">
				<view class="slot-wrap">
					<view class="text">格物云商</view>
					<u-search v-model="search" search-icon="search" :show-action="false"></u-search>
				</view>
			</u-navbar>
			<view class="banner">
        <u-swiper class="swiper" :list="bannerList" name="icon" @click="getSwiper"></u-swiper>
			</view>
		</view>
		
		<view class="menu-box">
      <swiper class="menu-swiper" :indicator-dots="showNavigationDots">
        <swiper-item class="menu-list" v-for="(row, i) in navigationList" :key="i">
          <view class="menu-item" v-for="item in row" :key="item.id" @click="toPage('/' + item.page)">
            <image :src="item.icon"></image>
            <text>{{item.title }}</text>
          </view>
          <view class="menu-item" v-for="(more, n) in (5 - row.length)" :key="i"></view>
        </swiper-item>
      </swiper>
		</view>
		
		<view class="image-box">
			<image v-for="item in activityList" :key="item.id" :src="item.icon" @click="toPage('/' + item.page)"></image>
		</view>
		
		<view class="list">
			<view class="list-title" @click="toPage('/pages/order/whole')">
				<view class="text">热门拼团</view>
				<view class="more">更多 <u-icon name="arrow-right" size="24"></u-icon> </view>
			</view>
			<view class="tips">拼中发货，失败给补偿</view>
			<view class="list-item">
				<view class="goods" @click="toPage('/pages/order/detail')">
					<view class="img">
						<image src=""></image>
					</view>
					<view class="content">
						<view class="title two-line">
							<text class="num">10人团</text>
							苹果13PRO超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全超值拼团挑战全网最低价颜色全
						</view>
						<view class="price">
							<text class="now-price">¥6600.00</text>
							<text class="old-price">¥7700.00</text>
						</view>
						<view class="bottom">
							<view class="imgs">
								<image></image>
								<image></image>
								<image></image>
							</view>
							<view class="text">3人已购买</view>
							<view class="invite">邀请好友</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	export default {
		data () {
			return {
				search:'',
        bannerList: [],
        navigationList: [],
        activityList: [],
        showNavigationDots: false,
				background: {
					backgroundColor: '#FA294C'
				},
				imagesUrl: imagesUrl.index
			}
		},
		onLoad() {
      this.init()
		},
		methods: {
      init() {
        this.$u.api.indexConfig().then(res => {
          let navigationList = []
          let list = []
          if(res.navigation.length > 0) {
            res.navigation.forEach((e, i) => {
              list.push(e)
							let n = Math.floor((i + 1) / 5)
							navigationList[n] = list
              if ((i + 1) % 5 === 0) {
                list = []
              }
            })
          }
					this.bannerList = res.banner
					this.navigationList = navigationList
          this.showNavigationDots = this.navigationList.length > 1
					this.activityList = res.activity
					console.log(res)
        })
      },
			getSwiper(e) {
        this.bannerList.forEach((b, i) => {
          if (e === i) this.toPage('/' + b.page)
        })
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.index-page {
		background: #F4F4F4;
		padding-bottom: 30rpx;
		.top {
			width: 100%;
			background: #FA294C;
			border-radius:0 0 30rpx 30rpx;
			padding-bottom: 30rpx;
			.top-navbar {
				.slot-wrap {
					display: flex;
					align-items: center;
					padding: 0 25rpx;
					box-sizing: border-box;
					.text {
						font-size: 34rpx;
						color: #fff;
						font-weight: bold;
						width:160rpx;
					}
				}
			}
			.banner {
				width: 700rpx;
				height: 260rpx;
				margin: 49rpx auto 0;
        .swiper {
          width: 700rpx;
          height: 260rpx;
          .swiper-item {
            width: 700rpx;
            height: 260rpx;
          }
        }
				image {
					width: 700rpx;
					height: 260rpx;
				}
			}
		}
		
		.menu-box {
			width: 700rpx;
      height: 250rpx;
			margin: 30rpx auto;
			box-shadow: 0 0 40rpx 0 #CCCCCC;
			border-radius: 10rpx;
			box-sizing: border-box;
			background: #fff;
      .menu-swiper {
        width: 100%;
        height: 100%;

      }
      .menu-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 53rpx 25rpx;
        box-sizing: border-box;
      }
			.menu-item {
        width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				image {
					width: 90rpx;
					height:90rpx;
				}
				text {
					font-size: 24rpx;
					color: #777;
					margin-top: 30rpx;
				}
			}
		}
		.image-box {
			width: 700rpx;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;
			image {
				width: 333rpx;
				height: 159rpx;
			}
		}
		.list {
			width: 700rpx;
			padding: 0 14rpx;
			margin: 0 auto;
			box-shadow: 0 0 40rpx 0 #CCCCCC;
			border-radius: 10rpx;
			.list-title {
				display: flex;
				padding: 29rpx 15rpx 0 15rpx;
				box-sizing: border-box;
				align-items: center;
				.text {
					flex: 1;
					font-size: 32rpx;
					color: #FD8201;
					font-weight: bold;
				}
				.more {
					font-size: 24rpx;
					color: #999;
				}
			}
			.tips {
				font-size: 22rpx;
				color: #999;
				padding: 17rpx 15rpx 15rpx 0;
			}
			.list-item {
				width:100%;
				box-sizing: border-box;
				.goods {
					width: 100%;
					padding: 40rpx 14rpx;
					border-bottom: 1px solid #eee;
					display: flex;
					justify-content: space-between;
					.img {
						margin-right: 30rpx;
						image {
							width: 210rpx;
							height: 160rpx;
						}
					}
					.content {
						flex: 1;
						.title {
							font-size: 26rpx;
							color: #333;
							text {
								display: inline-block;
								vertical-align: top;
							}
							.num {
								background-color: #353743;
								color: #fff;
								font-size: 20rpx;
								padding: 4rpx 9rpx;
								margin-right: 9rpx;
								margin-top: 3rpx;
							}
						}
						.price {
							margin: 24rpx 0;
							.now-price {
								color: #FD8201;
								font-size: 34rpx;
								margin-right: 20rpx;
								font-family: SimHei;
							}
							.old-price {
								color: #ccc;
								font-size: 30rpx;
								text-decoration:line-through
							}
						}
						.bottom {
							display: flex;
							align-items: center;
							.imgs {
								image {
									width: 35rpx;
									height: 35rpx;
									border-radius:50%;
									margin-right: 15rpx;
								}
								image + image {
									margin-left: -12rpx;
								}
							}
							.text {
								font-size: 24rpx;
								color: #666;
								flex: 1;
							}
							.invite {
								background-color: #FA5B40;
								border-radius: 5rpx;
								padding: 10rpx 5rpx;
								font-size: 20rpx;
								color: #fff;
							}
						}
					}
				}
			}
		
		
		}
	}
</style>
